import React, { useRef, useState } from 'react'
import '@/assets/css/RoomInfo.scoped.css'

//引入地图插件
import { TMap } from '@map-component/react-tmap';
import { DownOutline, UndoOutline } from 'antd-mobile-icons';
import { Link } from 'react-router-dom';

const Component = () => 
{
  let rid = React.params('rid')
	let [comment, SetComment] = useState([])
  let [show, SetShow] = useState(false)
  const popupContentRef = useRef(null)
  let [room, SetRoom] = useState({
    //需要给个初始值定义
    flag_text: []
  })

  React.useEffect(() => {
    window.scrollTo(0, 0); // 滚动到页面顶部
    RoomData()
  },[])

  const RoomData = async () => 
  {
    var result = await React.request.post('room/info', {rid})

    if(result.code == 0)
    {
      React.toast(result.msg, 'back', 'fail')
      return false
    }

    SetRoom(result.data.room)

		SetComment(result.data.comment)
  }

  //展示评论列表
	const CommentList = () =>
	{
		if(comment.length <= 0)
		{
				return (<></>)
		}

		return (
			<>
				<div id="comment" className="comment">
					<div className="title">评价</div>
					{
						comment.slice(0,3).map((item, key) => (
							<div className="rate-list-item" key={key}>
									<div className="item-content">
											<div className="content-prefix">
													<div className="ratelist">
															<div className="image">
                                  {/* 如果business不存在，这个字段就在后端被删除了 */}
																	<img src={item.business ? item.business.avatar_text : require("@/assets/images/avatar.png")} alt="" />
															</div>
															<p className="nickname">{item.business ? item.business.nickname : `匿名用户${item.starttime}`}</p>
													</div>
											</div>
											<div className="content-main">
													<div className="rate">
                            <React.UI.Rate readOnly style={{'--star-size': '18px'}} value={item.rate} />
													</div>
													<div className="item-description">
															<p>{item.comment}</p>
															<p className="item-time">{item.ratetime_text}</p>
													</div>
											</div>
									</div>
							</div>
						))
						
					}
					
					<div className="divider-horizontal">
							<div className="divider-content">
                {/* <a href="hotel-rate.html">更多评价内容</a> */}
									<React.UI.Button onClick={() => SetShow(true)}>更多评价内容</React.UI.Button>
							</div>
					</div>
				</div>
			</>
		)
	}

  //所有评论
  const CommentAll = () =>
  {
    if(comment.length <= 0)
    {
        return (<></>)
    }

    return (
      <>
        <div id="comment" className="comment">
          <div className="titleAll">所有评价 
            <div className="icon"><UndoOutline fontSize={24} onClick={Refresh}/> 
            {/* <DownOutline fontSize={26} style={{ 'position': 'relative','top': '-5px','left': '16px','opacity': '0.8', 'color': 'rgb(22, 119, 255)'}}/> */}
            </div>
          </div>
          {
            comment.map((item, key) => (
              <div className="rate-list-item" key={key}>
                  <div className="item-content">
                      <div className="content-prefix">
                          <div className="ratelist">
                              <div className="image">
                                  {/* 如果business不存在，这个字段就在后端被删除了 */}
                                  <img src={item.business ? item.business.avatar_text : require("@/assets/images/avatar.png")} alt="" />
                              </div>
                              <p className="nickname">{item.business ? item.business.nickname : `匿名用户${item.starttime}`}</p>
                          </div>
                      </div>
                      <div className="content-main">
                          <div className="rate">
                            <React.UI.Rate readOnly style={{'--star-size': '18px'}} value={item.rate} />
                          </div>
                          <div className="item-description">
                              <p>{item.comment}</p>
                              <p className="item-time">{item.ratetime_text}</p>
                          </div>
                      </div>
                  </div>
              </div>
            ))
          }
        </div>
      </>
    )
  }

  // const scrollToTop = () => {
  //   console.log(1234)
  //   console.log(scroll)
  // };

  const Refresh = () =>
  {
    RoomData()
  }

  return (
    <>
      <React.UI.Image src={room.thumb_text} width={'100%'} height={'30vh'} fit='cover' />

        <div className="detail_top">

            {/* 房型 */}
          <div id="intro" className="intro">
              <div className="title">{room.name}</div>
              <div className="betwee">
                  <div className="left">
                    {room.flag_text.length > 0 && room.flag_text.slice(4).map((item, ki) => (<span key={ki}>{item}</span>))}
                  </div>
              </div>
              {/* 简介部分 */}
              <div className="title">{room.content}</div>
          </div>

            {/* 预定须知 */}
          <div className="notesin">
              <div className="title">预订须知</div>
              <div className="item">
                  <span className="tips">预订房型：</span>
                  <span>{room.name}</span>
              </div>
              <div className="item">
                  <span className="tips">入离时间：</span>
                  <span>14:00 后入住，12:00 前退房</span>
              </div>
              <div className="item">
                  <span className="tips">预订时长：</span>
                  <span>随时可预订,最少预订1天, 最多预订天数不限</span>
              </div>
              <div className="item">
                  <span className="tips">剩余房间数量：</span>
                  <span>{room.total}</span>
              </div>
          </div>

            {/* 地图 */}
					<div className="comment map">
							<div className="title">地图路线</div>
							<TMap
									mapKey="GEMBZ-2O7WB-Q6GUD-JMYXD-6LKZE-X7BXN"
									version='1.exp'
									center={{ lat: 39.984104, lng: 116.307503 }}
							/>
					</div>
          
            {/* 评论 */}
          <CommentList />
        </div>

        <React.UI.Popup
          visible={show}
          onMaskClick={() => {
            SetShow(false)
          }}
          onClose={() => {
            SetShow(false)
          }}
          bodyStyle={{ 
            height: '77vh',
            borderTopLeftRadius: '2px',
            borderTopRightRadius: '2px',
            overflowY: 'scroll', 
            padding: '20px',
           }}
        >
          <CommentAll />
          {/* <div style={{
            // display:'none', 
            width:'100%', 
            position: 'sticky', 
            transform: 'translateX(80%)', 
            right:'20px', 
            bottom:'20px',
            zIndex: '999'}}>
            <React.UI.Button
              onClick={scrollToTop}
              style={{borderRadius:'50%',width:'45px', height:'45px',}} color='warning' size='large'
            >
              ↑
            </React.UI.Button>
          </div> */}
        </React.UI.Popup>

        <div className="foot-bar">
            <div className="price">
                ￥{room.price}
            </div>
            <div className="btn">
                <Link to={`/room/confirm?rid=${room.id}`}>立即预定</Link>
            </div>
        </div>
    </>
  )
}

export default Component